<template>
	<view class="search">
		<view class="searchHead">
			<input type="text" placeholder="搜索设备" class="inputs" placeholder-class="places" v-model="key"/>
			<image src="../../static/index/search.png" mode="" class="search" @tap="tipPage()"></image>
			<image src="../../static/index/code.png" class="codeImg" @tap="scan()"></image>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return {
				key: ''
			}
		},
		methods:{
			tipPage () {
				if (this.key === '') {
					uni.showToast({
						title: '请输入设备号！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.navigateTo({
					url: '../detail/detail?type=1&iemi=' + this.key
				})
			},
			scan () {
				console.log('扫码')
				uni.scanCode({
					onlyFromCamera: true,
				    success:  (res) => {
						console.log(res)
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						this.key = res.result
						this.tipPage()
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.searchHead{
		width: 690rpx;
		height: 132rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		overflow: hidden;
		.inputs{
			width: 510rpx;
			height: 68rpx;
			background-color: #F6F6F6;
			border-radius: 10rpx;
			padding-right: 80rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
		.search{
			position: absolute;
			right: 100rpx;
			width: 28rpx;
			height: 28rpx;
		}
		.places{
			color: #999999;
			font-size: 28rpx;
		}
		.codeImg{
			width: 46rpx;
			height: 46rpx;
		}
	}
</style>
